<!-- <page-header></page-header> -->
<nz-card class="nav">
    <ul>
        <li *ngFor="let item of navData">
            <p [ngClass]="{'colorGreen': item.name === '当前在线' || item.name === '门禁在线率','colorRed': item.name === '离线超过24小时' || item.name == '当前离线'}">{{item.count}}</p>
            <p>{{item.name}}</p>
        </li>
    </ul>
</nz-card>
<!--<nz-card>
    <sf [schema]="searchSchema" mode="search" width="200" (formSubmit)="searchData($event)" (formReset)="searchData(null)"></sf>
</nz-card>-->
<div class="btnList">
  <button nz-button down-file http-url="./assets/tmp/app-data.json" nzType="primary" class="mb-md">导出数据</button>
</div>
<nz-card>
    <nz-table #ajaxTable [nzData]="users" [nzShowTotal]="totalTemplate" [nzTotal]="param.total" [nzFrontPagination]="false"  (nzPageIndexChange)="currentPageDataChange($event)">
        <thead>
            <tr>
                <th *ngFor="let item of tableHeader" [attr.colspan]="item.title=='运行情况'?2:false" nzCustomFilter>{{item.title}}
                </th>
            </tr>
        </thead>
        <tbody>
            <!--<ng-container class="container" *ngFor="let item of users;let i = index">
                <tr>
                    <td [attr.rowspan]="item.devices.length">{{item.areaName}}</td>
                    <td [attr.rowspan]="item.devices.length">{{item.houseName}}</td>
                    <td [attr.rowspan]="item.devices.length">{{item.doorName}}</td>
                    <td>
                        {{item.devices[0].deviceName}}
                    </td>
                    <td>
                        {{item.devices[0].deviceCode}}
                    </td>
                    <td>
                        {{item.devices[0].deviceOperator === 0 ? '天威' : '移动'}}
                    </td>
                    <td>
                        {{item.devices[0].deviceStatus === 0 ? '在线' : '离线'}}
                    </td>
                    <td>
                        {{item.devices[0].onlineTime}}
                    </td>
                    <td>
                        {{item.devices[0].offTime}}
                    </td>
                    <td>
                        {{item.devices[0].offHour}}
                    </td>
                    <td [attr.rowspan]="item.devices.length">
                        <p>{{item.openDoorCount}}</p>
                        <p>开门次数</p>
                    </td>
                    <td [attr.rowspan]="item.devices.length">
                        <p>{{item.captureCount}}</p>
                        <p>抓拍数量</p>
                    </td>
                </tr>
                <tr *ngFor="let val of item.devices;let i = index">
                    <td *ngIf="i != 0">{{val.deviceName}}</td>
                    <td *ngIf="i != 0">{{val.deviceCode}}</td>
                    <td *ngIf="i != 0">{{val.deviceOperator === 0 ? '天威' : '移动'}}</td>
                    <td *ngIf="i != 0">{{val.deviceStatus === 0 ? '在线' : '离线'}}</td>
                    <td *ngIf="i != 0">{{val.onlineTime}}</td>
                    <td *ngIf="i != 0">{{val.offTime}}</td>
                    <td *ngIf="i != 0">{{val.offHour}}</td>
                </tr>
            </ng-container>-->
          <ng-container *ngFor="let item of ajaxTable.data;">
            <tr *ngFor="let device of item.devices;let i = index">
              <td *ngIf="i === 0"  [attr.rowspan]="item.devices.length">{{item.areaName}}</td>
              <td *ngIf="i === 0" [attr.rowspan]="item.devices.length">{{item.houseName}}</td>
              <td *ngIf="i === 0" [attr.rowspan]="item.devices.length">{{item.doorName}}</td>
              <td >{{device.deviceName}}</td>
              <td >{{device.deviceCode}}</td>
              <td >{{operatorDic.get(device.deviceOperator)}}</td>
              <td >
                <span *ngIf="device.deviceStatus === 0 " class="text-red">离线</span>
                <span *ngIf="device.deviceStatus !== 0 " class="text-green">在线</span>
              </td>
              <td >{{device.onlineTime}}</td>
              <td >{{device.offTime}}</td>
              <td >{{device.offHour}}</td>
              <td *ngIf="i === 0"  [attr.rowspan]="item.devices.length">
                <p>{{item.openDoorCount || 0}}</p>
                <p>开门次数</p>
              </td>
              <td *ngIf="i === 0" [attr.rowspan]="item.devices.length">
                <p>{{item.captureCount || 0}}</p>
                <p>抓拍数量</p>
              </td>
            </tr>
          </ng-container>

        </tbody>
    </nz-table>
</nz-card>
<ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>
<nz-dropdown-menu #menu="nzDropdownMenu">
    <div class="search-box">
        <!-- <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
        <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
            搜索
          </button>
        <button nz-button nzSize="small" (click)="reset()">重置</button>-->
    </div>
</nz-dropdown-menu>
